<template>
	<view>
		<view class="my-promptbox">
			<view class="sanjiao">
				<!-- 下方框 -->
				<view class="fangkuang" :style="{'background':bg,'z-index':zIndex}">
					<!-- 小三角 -->
					<view class="tan_sanjiao" :style="{'--bgcolor':bg}"></view>
					<view v-for="item in promptData" @click="clicklist(item)">
						<view style="padding: 20rpx 40rpx; display: flex;justify-content: center;align-items: center;">

							<image :src="URL+item.LogoPath" style="width: 100rpx; height: 100rpx;"></image>

							<text :style="{'color':item.ztcolor}" class="nartext">{{item.FullName}}</text>
							<!-- <text v-show="item.Status==1" style="color:green;">认证成功</text> -->
							<u-icon v-show="item.Status==1" name="checkmark-circle" color="green" size="18"></u-icon>
							<text v-show="item.Status==0" style="color:red;">未认证</text>
							<!-- <u-icon v-show="item.Status==0" name="info-circle" color="red" size="18"></u-icon> -->
						</view>
						<u-line :color="lineColor"></u-line>
					</view>

					<view>
						<slot name="promptText"></slot>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bg: { //背景色
				type: String,
				default: "#000000"
			},
			color: { //字体颜色
				type: String,
				default: "#ffffff"
			},
			lineColor: { //线条颜色
				type: String,
				default: "#F5F5F5"
			},
			zIndex: { //层级
				type: Number,
				default: 10
			},
			promptData: { //显示数据
				typeof: Array,
				default: () => {}
			},
			isSlot: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				URL: this.$config.domain.staticUrl,
			}
		},
		onLoad() {},
		methods: {
			clicklist(item) {
				this.$emit('clicklist', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-promptbox {
		position: fixed;
		right: 35rpx;
		z-index: 99999;
		color: green;

		.sanjiao {

			.fangkuang {
				position: relative;
				border-radius: 10rpx;

				.tan_sanjiao {
					//小三角
					border-radius: 2rpx;
					position: absolute;
					right: 3%;
					overflow: hidden;
					height: 60rpx;
					width: 60rpx;
					top: -60rpx;
				}

				.tan_sanjiao:before {
					content: '';
					position: relative;
					top: 100rpx;
					right: 4rpx;
					display: inline-block;
					height: 100rpx;
					width: 100rpx;
					border-radius: 2rpx;
					background-color: var(--bgcolor);
					transform-origin: right top;
					transform: rotate(45deg);
				}
			}
		}
	}

	.nartext {
		margin: 0rpx 20rpx;
	}
</style>
